extends layout

block content
	- var docs= JSON.parse(definition);
	- 
	- function displayText(txt) {
	- return txt.replace('\n','<br/>');	
	- }

	- function prettyDate(date){
	- var d = date.getDate();
	- var m = date.getMonth() + 1; //Months are zero based
	- var y = date.getFullYear();
	- var h = date.getHours();
	- var mm = date.getMinutes();
	- var s = date.getSeconds();
	-
	-     return d+'/'+m+'/'+y+' '+h+':'+mm+':'+s;
	-   }

	div(style="border-bottom: 1px solid #999;padding-bottom: 10px;overflow: hidden;")

		h1(style="float:left;")
			span #{title}

		span(id='Details-block',font-size='10px')
		
	script(type="text/javascript").
		var jsonData=!{definition};	
		var decorations= !{decorations};	
	script(type="text/javascript").
		function showDocs()
		{
		  var dv = document.getElementById("docs");
		  var button =document.getElementById("showDoc");
		  if (dv.style.display === "none") {
			dv.style.display = "block";
			button.innerHTML="&uarr;";
		  } else {
			dv.style.display = "none";
			button.innerHTML="&darr;";
		  }
		}
		function showLogs()
		{
		  var dv = document.getElementById("logs");
		  var button =document.getElementById("showHide");
		  if (dv.style.display === "none") {
			dv.style.display = "block";
			button.innerHTML="&uarr;";
		  } else {
			dv.style.display = "none";
			button.innerHTML="&darr;";
		  }
		}
		$(document).ready(function() {
		  var lines= $('#logs').find('table').find('tr').find('td');
		  lines.each(function(index) {

			  if ($(this).text().startsWith('debug:')) {
				$(this).css("color", "green");
				}
			  if ($(this).text().startsWith('log:Action:')) {
				$(this).css("font-weight", "bold");
				$(this).css("font-size", "14px");
				}
			}); // end each
		  }); // end ready
	
	div(id="instances")
		h4 Instance Information 
		- let lastAt = (lastItem.endedAt) ? lastItem.endedAt : lastItem.startedAt;
		table
			tr 
				td name:
				td  #{instance.name}
				td id:
				td #{instance.id}
			tr
				td started At
				td(class='startDate') #{(instance.startedAt)}
				td ended At
				td #{(instance.endedAt)}
			tr
				td lastAt
				td #{lastAt} 
			tr
				td lastItem
				td #{lastItem.elementId}
				td last status
				td #{lastItem.status}

					
		h4 Instance Data 
		table
			each v in vars
				tr
					td #{v.key}
					td #{v.value}

		div!= svg

		h4 Model Documentation<button id="showDoc" onclick="showDocs()">&darr;</button>
		div(id="docs" style="display:none;border-width:.5px;border-style: solid;border-color: aliceblue;background: #f7f7f3;") 
			include includes/modelDoc.pug

		h4 Instance Items

		span Times shown are from the start of the Execution
		table
			tr
				td seq
				td Element Id
				td Name
				td Started
				td Ended
				td Status
				td Type
				td User
				td Action
					
			- let seq=0;
			each item in items
				- var ref = "?id="+item.id+"&processName="+instance.name+"&elementId="+item.elementId;
				- var label='';
				- var label2='';
				- if (item.status=='wait' && item.type=='bpmn:UserTask') label= 'Execute';
				- if (item.status=='wait' && item.type=='bpmn:UserTask') label2= 'Assign';
				- if (user && user.isAdmin() && item.status=='wait' && item.type.includes('Event')) label= 'Force';
				- var assign='';
				- if (item.candidateUsers) assign+='>Assigned to users:\''+item.candidateUsers+'\'';
				- if (item.candidateGroups) assign+=' groups: \''+item.candidateGroups+'\'';
				- if (item.assignee) assign+=' Assigned to: \''+item.assignee+'\'';
				- if (item.dueDate) assign+=' Due on:'+item.dueDate;
				- seq++;
					tr
						td #{seq}
						td #{item.elementId}
						td #{item.name}
						td(class='date') #{item.startedAt}
						td(class='date') #{item.endedAt}
						td #{item.status}
						td #{item.type}
						td #{item.userName}
						td
							a(href=`/invokeItem${ref}`) #{label} 
							a(href=`/assign${ref}`) #{label2}
				if (!assign=='')
					tr
						td
						td(colspan=8) #{assign}

		h4 Instance Info 
		div(id="info" ) 
			table(style='width:100%')
				each log in logs
					if (log.type=='info')
						tr
							td(style="width:1%;white-space:nowrap") #{prettyDate(log.date)}
							td #{log.message}
			
		h4 Instance Logs <button id="showHide" onclick="showLogs()">&darr;</button>
		div(id="logs" style="display:none;") 
			table(style='width:100%')
				each log in logs
					tr
						td(style="white-space:nowrap") #{prettyDate(log.date)}
						td #{log.message}
			
